<template>
	<view class="hehe">
		<view class="video-wrap">
			<video src="videoSrc" style="width: 100vw;">
				<cover-view class="video-btn-wrap">
					<cover-image class="video-play" :style="`background-color: rgba(255, 255, 255, ${opacity}); transform: scale(${scaleNum});`" src="@/static/images/driveing/car-model.png" />
				</cover-view>
			</video>
		</view>
		<u-button type="primary" @click="toggle">点击 - {{show}}</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				scaleNum: 1,
				opacity: 0,
				videoSrc: 'https://img.tukuppt.com/video_show/2405179/00/01/53/5b457a0269153.mp4',
				subDevicePopup: null,
				record: {
					"id": 9524,
					"callRecordId": "9524",
					"dialTime": "2024-06-20 17:04:33",
					"startTime": "2024-06-20 17:04:33",
					"disposition": "ANSWERED",
					"orgCode": "",
					"departId": null,
					"departName": "厦门中埔哈弗燃油4S店",
					"currentDepartName": "厦门中埔哈弗燃油4S店",
					"duration": 370,
					"serviceType": "yly-caller",
					"serviceTypeInteger": 10,
					"type": 10,
					"sysUserId": 193,
					"userId": 193,
					"sysUsername": "沈月凤",
					"userName": "沈月凤",
					"jobNumber": "010133",
					"roleName": "电销专员",
					"workPhone": null,
					"workPhoneTwo": null,
					"customerMobile": "14791093661",
					"customerRealName": null,
					"callerNbr": "",
					"calledNbr": "14791093661",
					"realCallerNbr": null,
					"realCalledNbr": null,
					"voiceAddress": "https://www.cambridgeenglish.org/images/153149-movers-sample-listening-test-vol2.mp3",
					"attachmentFilePath": "https://www.cambridgeenglish.org/images/153149-movers-sample-listening-test-vol2.mp3",
					"callRecordNo": "2024062017110001",
					"businessId": "98113",
					"createTime": "2024-06-20 17:11:36",
					"audioContent": null,
					"translate": null,
					"businessType": 11,
					"isAvailable": null,
					"isBind": 0,
					"desensitizationFlag": true,
					"cloudRecordType": 4,
					"phone": "",
					"successfullyType": 1,
					"endTime": "2024-06-20 17:10:43",
					"callRecordUserJoinTeamTimeTxt": "1年1月",
					"userAvatar": "https://wcl-oss.wanguocar.com.cn:10104/v3/wclpro/test/images/2024/03/15/83fac0e6b888468cacb6f34a0561066f.png",
					"matchKeywordNum": null,
					"totalKeywordNum": null,
					"settingType": 11,
					"settingTypeDesc": "线索管理",
					"callDialRecordId": 9582,
					"score": null,
					"callRecordFileList": [
						{
							"duration": 97,
							"attachmentFilePath": "https://wcl-oss.wanguocar.com.cn:10104/v3/wgaicloud/prod/callrecord/audio/2024/3/13/production_out_18350691886_1710294854.amr",
							"fileType": 1
						}
					],
					"voiceAddressIn": "https://www.cambridgeenglish.org/images/153149-movers-sample-listening-test-vol2.mp3",
					"voiceAddressOut": "https://www.cambridgeenglish.org/images/153149-movers-sample-listening-test-vol2.mp3",
					"mobileModel": null,
					"hasRecord": 1,
					"dialMethod": null
				},
			}
		},
		mounted() {
			this.setSubNvue()
			uni.$on('DevicePopupKey', (data) => {
				console.log(data)
				this.subDevicePopup.hide();
			})
		},
		beforeDestroy() {
			console.log("555555555")
			uni.$off('DevicePopupKey')
		},
		methods: {
			setSubNvue() {
				const _this = this
				const subNvue = uni.getSubNVueById('DeviceHeader'); // 这个id是pages.json下绑定的唯一id
				subNvue.hide();
				setTimeout(()=> {
				  subNvue.show('none', 0, () => {
					subNvue.setStyle({
					  top: '45px',
					  left: '0',
					  right: '0',
					  width: '100vw',
					  height: '500px',
					  zindex: 99999999,
					  background: 'transparent',
					});
				  });
					// 向原生子窗体传递数据
					uni.$emit('page-popup', {
					  record: _this.record
					})

				}, 100)
				
				const subDevicePopup = uni.getSubNVueById('DevicePopup'); // 这个id是pages.json下绑定的唯一id
				this.subDevicePopup = subDevicePopup
				subDevicePopup.hide();
				
				setTimeout(()=> {
				  uni.$emit('showDevicePopupKey', {
					title: '我是传递的内容'
				  })
				  subDevicePopup.show('none', 0, () => {
					subDevicePopup.setStyle({
					  width: '100vw',
					  height: '100vh',
					  zindex: 99999999,
					  background: 'transparent',
					});
				  });
				}, 100)
			}
		}
	}
</script>

<style lang="scss" scoped>
.hehe {
	width: 100vw;
	height: 100vh;
	padding-top: 1000rpx;
	background-color: greenyellow;
	.video-wrap {
		position: relative;
	}
	.aaaa {
		background-image: url('~@/static/images/driveing/car-model.png');
		background-color: rgba(255, 255, 255, 0.8); // 设置背景颜色为白色，透明度为0.5
	}
	.video-btn-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}
	.video-play {
		width: 60rpx;
		height: 40rpx;
	}
}
</style>
